<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <title>Document</title>
</head>
<body>
<div id="department">
    <div style="padding: 0 8px 0;">部门管理
        <el-button style="float: right" type="primary" class="el-button--mini" icon="el-icon-plus"
                   v-on:click="add">新增
        </el-button>
    </div>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="部门ID"
                prop="did">
        </el-table-column>
        <el-table-column
                label="部门名称"
                prop="name">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        circle
                        type="primary"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">
                </el-button>
                <el-button
                        size="mini"
                        circle
                        icon="el-icon-delete"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            style="float: right;margin-top: 10px;"
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="8"
            layout="prev, pager, next"
            :total="totalPage">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" top="1px">
        <el-form :model="form">
            <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" v-on:click="sub">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#department",
        data() {
            return {
                tableData: [],
                search: '',
                currentPage: 1,
                totalPage: 1,
                dialogFormVisible: false,
                form: {
                    did: '',
                    name: '',
                },
                formLabelWidth: '120px'
            }
        },
        created: function () {
            this.getList();
        },
        watch: {
            search(curVal, oldVal) {
                this.getList();
            }
        },
        methods: {
            getList() {
                let here = this;
                let union = {
                    currentPage: here.currentPage,
                    search: here.search
                };
                union = encodeURIComponent(JSON.stringify(union));
                axios({
                    method: 'post',
                    url: '/dao/departmentList',
                    data: union
                }).then(function (response) {
                    let json = JSON.parse(decodeURIComponent(response.data));
                    here.tableData = json.tableData;
                    here.totalPage = json.totalPage;
                });
            },
            handleEdit(index, row) {
                this.form.did = row.did;
                this.form.name = row.name;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                let here = this;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dao/update/departmentDelete',
                        data: row
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if(data.success === "1"){
                            here.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            here.getList();
                        } else {
                            here.$message("删除失败");
                        }
                    });
                }).catch(() => {
                    here.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            sub() {
                let here = this;
                let data = encodeURIComponent(JSON.stringify(this.form));
                if (this.form.name !== '') {
                    axios({
                        method: 'post',
                        url: '/dao/update/departmentEdit',
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                        },
                        data: data,
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if (data.success === "1") {
                            here.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            here.getList();
                        } else {
                            here.$message.error('修改失败');
                        }
                    });
                } else {
                    here.$message.error("数据不完整");
                }
                this.formInit();
            },
            add() {
                this.formInit();
                this.dialogFormVisible = true;
            },
            formInit() {
                this.form.did = '';
                this.form.name = '';
            },
            handleCurrentChange(val) {
                this.getList();
            }
        },
    });
</script>
</html>
